<!DOCTYPE html>
<html>
<head>
    <title>API连接测试</title>
    <meta charset="UTF-8">
</head>
<body>
    <h1>API连接测试</h1>
    <button onclick="testAPI()">测试API连接</button>
    <div id="result"></div>
    
    <script>
    async function testAPI() {
        const resultDiv = document.getElementById('result');
        resultDiv.innerHTML = '正在测试...';
        
        try {
            // 测试根路径
            const response1 = await fetch('http://127.0.0.1:8000/');
            const data1 = await response1.text();
            
            // 测试搜索API
            const response2 = await fetch('http://127.0.0.1:8000/api/search', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    keyword: '测试',
                    max_products: 1
                })
            });
            const data2 = await response2.json();
            
            resultDiv.innerHTML = `
                <h3>测试结果:</h3>
                <p><strong>根路径响应:</strong> ${data1}</p>
                <p><strong>搜索API响应:</strong> ${JSON.stringify(data2, null, 2)}</p>
                <p style="color: green;">✅ API连接正常!</p>
            `;
        } catch (error) {
            resultDiv.innerHTML = `
                <p style="color: red;">❌ API连接失败: ${error.message}</p>
                <p>请检查:</p>
                <ul>
                    <li>后端服务是否运行在 http://127.0.0.1:8000</li>
                    <li>CORS配置是否正确</li>
                    <li>网络连接是否正常</li>
                </ul>
            `;
        }
    }
    </script>
</body>
</html>